<template>
  <div class="index-box">
    <div class="content-head">
      <a-row>
        <a-col span="12">
          <a-button type="primary" icon="plus" style="margin-right: 8px;" @click="() => { $router.push({name:'data_building_operation',params:{id:'add'}}) }">添加</a-button>
          <a-popconfirm title="是否要删除当前选中楼宇？" @confirm="deleteInfo">
            <a-button :disabled="$common.isEmpty(selectedRowKeys)">删除</a-button>
          </a-popconfirm>
        </a-col>
        <a-col span="10" offset="2">
          <a-input-group>
            <a-input-search style="width:250px;float:right;position: static;" placeholder="楼宇名称" enterButton @search="onSearch($event,2)" />
            <a-select style="width:200px;float:right;position: static;padding-right: 5px" :options="communityList" @change="onSearch($event,1)" placeholder="请选小区" />
          </a-input-group>
        </a-col>
      </a-row>
    </div>
    <div class="content-body">
      <s-table ref="table" size="default" :columns="columns" rowKey="id"  :data="loadData" :loading='table_loading' :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          <template slot="unit_num" slot-scope="text,record">
            <span>
              {{text}}
            </span>
            <a href="javascript:void(0);" @click="() => { $router.push({name:'data_building_unit',params:{id:record.id}}) }">编辑</a>
          </template>
         <template slot="operation" slot-scope="text,record">
          <a-dropdown>
            <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item key="0.9" @click="operation($event,record.id)">房屋管理</a-menu-item>
              <a-menu-item key="1" @click="operation($event,record.id)">编辑</a-menu-item>
              <a-menu-item key="2">
                 <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
import {STable} from '@/components'
import { mapGetters } from 'vuex'
  export default {
    name: 'data_building_index',
    components: {
    STable
    },
    data() {
      return {
        // 查询参数
        queryParam: {},
        communityList:[], // 小区列表
        columns:[
          {
            title:'编号',
            dataIndex:'id'
          },
          {
            title:'所属小区',
            dataIndex:'bd_info_id_text'
          },
          {
            title: '楼宇名称',
            dataIndex:'name'
          },
          {
            title: '单元数量',
            dataIndex:'unit_num',
            scopedSlots:{customRender:'unit_num'}
          },
          {
            title: '户数',
            dataIndex:'user_num'
          },
          {
            title: '楼宇类型',
            dataIndex:'type'
          },
          {
            title: '楼宇结构',
            dataIndex:'struct'
          },
          {
            title: '楼宇朝向',
            dataIndex:'direction'
          },
          {
            title: '楼宇状态',
            dataIndex:'status'
          },
          {
            title: '状态说明',
            dataIndex:'reason'
          },
          {
            title: '操作',
            dataIndex:'operation',
            scopedSlots:{customRender:'operation'}
          }
        ],
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          let param=Object.assign(parameter, this.queryParam)
          return new Promise((resolve,reject) => {
            this.axios({
              method:'get',
              url:'/community/get_bd_info_list',
              params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
            }).then(res => {
              if(res.code === 0){
                resolve(res.data)
              }else{
                this.$message.error('res.data.msg',2);
              }
            }).catch(err => {
              this.$message.error('服务器发生错误...',2);
            }).finally(() => {
              this.table_loading = false;
            })
          })
        },
        selectedRowKeys: [],
        table_loading:false,
        loading:false,
      }
    },
    mounted() {
      this.getCommunity();
    },
    methods:{
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 楼宇操作
      operation({ key },id) {
        if(key === '0.9') this.$router.push({name:'data_houses_index',params:{id}})
        if(key === '1') this.$router.push({name:'data_building_operation',params:{id}});
      },
      deleteInfo(){
        if(!this.$common.isEmpty(this.selectedRowKeys)){
          this.loading = true;
          this.axios({
            method:'post',
            url:'/community/del_building_info_list',
            data:{token:this.token(),ids:this.selectedRowKeys}
          }).then(res => {
            this.loading = false;
            if(res.code === 0){
              this.$message.success(res.data.msg,2);
              this.$refs.table.refresh()
            }else{
              this.$message.error(res.data.msg,2);
            }
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
            this.loading = false;
          })
        }else{
          this.$message.error('没有选择可以删除的列',2);
        }
      },
       // 获取小区列表
      getCommunity() {
        this.axios({
          method:'post',
          url:'/parking/getAllCommunityList',
          data:{token:this.token()}
        }).then(res => {
          if(res.code === 0){
              let ifo = {value:0,label:'所有小区'};
              res.data.unshift(ifo);
              this.communityList = res.data;
          }else this.$message.warning(res.msg);
        }).catch(err => {
          this.$message.error('服务器发生错误...');
        })
      },
      remove(id) {
        this.selectedRowKeys = [id];
        this.deleteInfo();
      },
      // 楼宇筛选
      onSearch(val,key) {
        if(key==1){
          this.queryParam['bd_info_id'] = val;
        }else{
           this.queryParam['name'] = val;
           this.$refs.table.refresh(true);
        }

      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
  }
</style>